<template>
    <div class="com_box pd_20">
        <div class="time_title head_title">筛选</div>
        <div class="flexbox">
            <div class="fx_left">达人信息</div>
            <div class="flexbox flexcenter fx_right flex">
                <div class="fx_box flexbox flexcenter">
                    <div class="fx_text">达人类目</div>
                    <div class="fx_line"></div>
                    <el-select v-model="subForm.industry" ref="tagRef" placeholder="全部" @change="selectTag" size="mini" filterable multiple collapse-tags :style="{width:selectWidth+'px'}" style="margin-left:10px">
                        <el-option v-for="item in tagList" :key="item.id" :label="item.tags" :value="item.id">
                        </el-option>
                    </el-select>
                    <!-- <el-cascader style="width:80px" ref="tagRef" id="el-cascader" @change="selectTag" v-model="tagValue" :options="options" :props="{multiple: true,emitPath:true}" collapse-tags size="mini" placeholder="全部"></el-cascader> -->
                </div>
                <div class="fx_box flexbox flexcenter">
                    <div class="fx_text">粉丝量级</div>
                    <div class="fx_line"></div>
                    <el-input v-model="queryInfo.fx_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">w</span>
                    <span class="fx_unit">~</span>
                    <el-input v-model="queryInfo.fx_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">w</span>
                </div>
            </div>
        </div>
        <div class="flexbox">
            <div class="fx_left">人群画像</div>
            <div class="flexbox flexcenter fx_right flex">
                <div class="fx_box flexbox flexcenter">
                    <el-select v-model="queryInfo.age" placeholder="年龄画像" @change="changeScreen" size="mini" style="width:90px">
                        <el-option v-for="item in ageList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <div class="fx_line noMl"></div>
                    <el-input v-model="queryInfo.age_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                    <span class="fx_unit">~</span>
                    <el-input v-model="queryInfo.age_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                </div>
                <div class="fx_box flexbox flexcenter">
                    <el-select v-model="queryInfo.sex" placeholder="粉丝性别" @change="changeScreen" size="mini" style="width:90px">
                        <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <div class="fx_line noMl"></div>
                    <el-input v-model="queryInfo.sex_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                    <span class="fx_unit">~</span>
                    <el-input v-model="queryInfo.sex_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                </div>
            </div>
        </div>
        <div class="flexbox">
            <div class="fx_left mg_top0">平台属性</div>
            <div class="flexbox flexcenter fx_right flex">
                <el-checkbox v-model="subForm.is_quickly_response" :true-label="1" :false-label="0" @change="changeScreen">
                    <div class="cust_checkbox">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="3.125" y="4.375" width="13.5969" height="10.9821" rx="2.09184" fill="#F5D12F" />
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5211 6.77599C10.5212 6.70806 10.4996 6.64201 10.4596 6.58806C10.4197 6.53411 10.3637 6.49527 10.3003 6.47754C10.2369 6.45981 10.1696 6.46418 10.1088 6.48998C10.0481 6.51578 9.99722 6.56156 9.96414 6.62025L7.87239 10.3283C7.84589 10.3753 7.83185 10.4287 7.83167 10.483C7.83149 10.5374 7.84519 10.5909 7.87138 10.638C7.89757 10.6851 7.93532 10.7243 7.98083 10.7515C8.02634 10.7788 8.078 10.7931 8.13057 10.7931H9.32586V12.9561C9.32583 13.0241 9.34744 13.0901 9.38736 13.1441C9.42727 13.198 9.48327 13.2369 9.54668 13.2546C9.6101 13.2723 9.67739 13.2679 9.73816 13.2421C9.79893 13.2163 9.84979 13.1706 9.88286 13.1119L11.9746 9.40379C12.0011 9.35683 12.0152 9.30347 12.0153 9.2491C12.0155 9.19473 12.0018 9.14127 11.9756 9.09412C11.9494 9.04698 11.9117 9.00781 11.8662 8.98058C11.8207 8.95335 11.769 8.93902 11.7164 8.93904H10.5211V6.77599Z" fill="white" />
                            <path d="M13.3563 16.6743C13.341 16.9087 13.0831 17.0437 12.8817 16.9229L9.40062 14.8342L13.4767 14.8342L13.3563 16.6743Z" fill="#F5D12F" />
                        </svg>
                        <span class="color_02">快速回复</span>
                    </div>
                </el-checkbox>
                <el-checkbox v-model="subForm.is_active_creator" :true-label="1" :false-label="0" @change="changeScreen">
                    <div class="cust_checkbox">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="1.875" y="5" width="13.5764" height="10.625" rx="2.36111" fill="#EE3358" />
                            <path d="M13.2268 10.8021C12.8795 10.5681 12.8795 10.0569 13.2268 9.82294L16.8925 7.35386C17.2845 7.08977 17.8125 7.37071 17.8125 7.84344L17.8125 12.7816C17.8125 13.2543 17.2845 13.5353 16.8925 13.2712L13.2268 10.8021Z" fill="#EE3358" />
                            <path d="M8.69153 9.83021C9.0248 10.0654 9.0248 10.5596 8.69153 10.7948L6.08686 12.6328C5.69584 12.9087 5.15625 12.6291 5.15625 12.1505L5.15625 8.47451C5.15625 7.99594 5.69584 7.7163 6.08686 7.99222L8.69153 9.83021Z" fill="white" />
                        </svg>
                        <span class="color_02">频繁发帖</span>
                    </div>
                </el-checkbox>
                <el-checkbox v-model="subForm.is_high_sample_dispatch_rate" :true-label="1" :false-label="0" @change="changeScreen">
                    <div class="cust_checkbox">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="3.75" y="3.125" width="11.875" height="13.75" rx="2.5" fill="#529FED" />
                            <rect x="6.25" y="6.875" width="6.25" height="1.25" rx="0.625" fill="white" />
                            <rect x="6.25" y="9.375" width="3.75" height="1.25" rx="0.625" fill="white" />
                            <mask id="path-4-outside-1_12090_49038" maskUnits="userSpaceOnUse" x="8.83312" y="8.4465" width="11.5465" height="10.9583" fill="black">
                                <rect fill="white" x="8.83312" y="8.4465" width="11.5465" height="10.9583" />
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.564 11.2492C17.8374 11.4599 17.8882 11.8524 17.6775 12.1258L13.85 17.0916C13.7158 17.2657 13.5079 17.3496 13.304 17.3331C13.139 17.3602 12.9636 17.3215 12.8208 17.2114L10.5014 15.4238C10.228 15.2131 10.1772 14.8206 10.3879 14.5472L10.4238 14.5006C10.6346 14.2272 11.027 14.1764 11.3004 14.3871L13.161 15.8212L16.6309 11.3192C16.8416 11.0458 17.2341 10.9949 17.5075 11.2057L17.564 11.2492Z" />
                            </mask>
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.564 11.2492C17.8374 11.4599 17.8882 11.8524 17.6775 12.1258L13.85 17.0916C13.7158 17.2657 13.5079 17.3496 13.304 17.3331C13.139 17.3602 12.9636 17.3215 12.8208 17.2114L10.5014 15.4238C10.228 15.2131 10.1772 14.8206 10.3879 14.5472L10.4238 14.5006C10.6346 14.2272 11.027 14.1764 11.3004 14.3871L13.161 15.8212L16.6309 11.3192C16.8416 11.0458 17.2341 10.9949 17.5075 11.2057L17.564 11.2492Z" fill="#529FED" />
                            <path d="M17.6775 12.1258L18.0735 12.431L18.0735 12.431L17.6775 12.1258ZM17.564 11.2492L17.8692 10.8532L17.8692 10.8532L17.564 11.2492ZM13.85 17.0916L13.454 16.7864L13.85 17.0916ZM13.304 17.3331L13.2228 16.8397L13.2832 16.8298L13.3443 16.8347L13.304 17.3331ZM12.8208 17.2114L13.126 16.8154L13.126 16.8154L12.8208 17.2114ZM10.5014 15.4238L10.8067 15.0278L10.8067 15.0278L10.5014 15.4238ZM10.3879 14.5472L10.784 14.8524L10.784 14.8524L10.3879 14.5472ZM10.4238 14.5006L10.0278 14.1954L10.0278 14.1954L10.4238 14.5006ZM11.3004 14.3871L11.6056 13.9911L11.6056 13.9911L11.3004 14.3871ZM13.161 15.8212L13.557 16.1264L13.2518 16.5224L12.8557 16.2172L13.161 15.8212ZM16.6309 11.3192L16.2349 11.0139L16.2349 11.0139L16.6309 11.3192ZM17.5075 11.2057L17.2023 11.6017L17.5075 11.2057ZM17.2814 11.8205C17.3236 11.7659 17.3134 11.6874 17.2587 11.6452L17.8692 10.8532C18.3613 11.2325 18.4528 11.9389 18.0735 12.431L17.2814 11.8205ZM13.454 16.7864L17.2814 11.8205L18.0735 12.431L14.246 17.3969L13.454 16.7864ZM13.3443 16.8347C13.3866 16.8381 13.4275 16.8208 13.454 16.7864L14.246 17.3969C14.0042 17.7107 13.6292 17.861 13.2636 17.8314L13.3443 16.8347ZM13.126 16.8154C13.1546 16.8374 13.1888 16.8453 13.2228 16.8397L13.3852 17.8264C13.0892 17.8752 12.7727 17.8056 12.5155 17.6074L13.126 16.8154ZM10.8067 15.0278L13.126 16.8154L12.5155 17.6074L10.1962 15.8198L10.8067 15.0278ZM10.784 14.8524C10.7418 14.9071 10.752 14.9856 10.8067 15.0278L10.1962 15.8198C9.70408 15.4405 9.61262 14.7341 9.99192 14.242L10.784 14.8524ZM10.8199 14.8059L10.784 14.8524L9.99192 14.242L10.0278 14.1954L10.8199 14.8059ZM10.9952 14.7832C10.9405 14.741 10.862 14.7512 10.8199 14.8059L10.0278 14.1954C10.4071 13.7033 11.1135 13.6118 11.6056 13.9911L10.9952 14.7832ZM12.8557 16.2172L10.9952 14.7832L11.6056 13.9911L13.4662 15.4252L12.8557 16.2172ZM17.0269 11.6244L13.557 16.1264L12.765 15.5159L16.2349 11.0139L17.0269 11.6244ZM17.2023 11.6017C17.1476 11.5595 17.0691 11.5697 17.0269 11.6244L16.2349 11.0139C16.6142 10.5218 17.3206 10.4304 17.8127 10.8096L17.2023 11.6017ZM17.2587 11.6452L17.2023 11.6017L17.8127 10.8096L17.8692 10.8532L17.2587 11.6452Z" fill="white" mask="url(#path-4-outside-1_12090_49038)" />
                        </svg>
                        <span class="color_02">即时履约</span>
                    </div>
                </el-checkbox>
            </div>
        </div>
        <div class="flexbox">
                <div class="fx_left">地区类型</div>
                <div class="flexbox flexcenter fx_right flex">
                    <el-radio-group v-model="subForm.region" size="small" style="margin-top:12px">
                        <el-radio-button :label="item.id" v-for="item in regionList" :key="item.id">{{item.name}}</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        <div class="flexbox" v-if="hasScreen.length>0">
            <div class="fx_left">已选</div>
            <div class="fx_check flex flexbox">
                <div class="check_item flexbox flexcenter" v-for="item in hasScreen" :key="item">
                    {{item.text}}
                    <el-link icon="el-icon-close" :underline="false" class="fx_close" @click="delectScreen(item)"></el-link>
                </div>
            </div>
        </div>
        <div class="fx_btn">
            <el-button plain size="small" class="el-button-width" @click="resetScreen">重置</el-button>
            <el-button type="primary" size="small" class="el-button-width" @click="selectScreen" @keyup.enter.native="selectScreen()">筛选</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: ["subForm"],
    name: "",
    data() {
        return {
            selectWidth: 60,
            hasScreen: [],
            tagList: [],
            queryInfo: {
                fx_l: "",
                fx_r: "",
                age: "",
                age_l: "",
                age_r: "",
                sex: "",
                sex_l: "",
                sex_r: "",
            },
            ageList: [
                {
                    id: "crowd_ages_18_24",
                    name: "18_24岁",
                },
                {
                    id: "crowd_ages_25_34",
                    name: "25_34岁",
                },
                {
                    id: "crowd_ages_35_more",
                    name: "大于35岁",
                },
            ],
            sexList: [
                {
                    id: "crowd_genders_male",
                    name: "男",
                },
                {
                    id: "crowd_genders_female",
                    name: "女",
                },
            ],
            chanelType: [
                {
                    name: "快速回复",
                    id: 1,
                },
                {
                    name: "频繁发帖",
                    id: 2,
                },
                {
                    name: "即时履约",
                    id: 3,
                },
            ],
            regionList:[
                {
                    name: "印尼",
                    id: 'ID',
                },
                {
                    name: "美国",
                    id: 'US',
                },
            ]
        };
    },
    created() {
        this.getTagList();
    },
    beforeDestroy() {},
    methods: {
        //获取标签
        async getTagList() {
            const { data: res } = await this.$http.post(
                "privateorder/Indonesian/bloggerTags"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.tagList = res.data;
            }
        },

        getDataList() {
            this.$emit("getDataList");
        },
        selectTag(value) {
            if (value.length > 0) {
                this.selectWidth = 200;
            } else {
                this.selectWidth = 60;
            }
            this.changeScreen();
        },

        changeScreen() {
            let hasChecked = [];
            if (this.subForm.industry.length > 0) {
                let arr = {
                    type: "tag",
                    value: "",
                    text: this.tagName(
                        this.subForm.industry,
                        this.tagList,
                        "达人类目",
                        "tags"
                    ),
                };
                hasChecked.push(arr);
            }
            if (this.queryInfo.fx_l && this.queryInfo.fx_r) {
                let arr = {
                    type: "fans",
                    value: "",
                    text:
                        "粉丝量级：" +
                        this.queryInfo.fx_l +
                        "w~" +
                        this.queryInfo.fx_r +
                        "w",
                };
                hasChecked.push(arr);
                this.subForm.follower_cnt = [
                    Number(this.queryInfo.fx_l) * 10000,
                    Number(this.queryInfo.fx_r) * 10000,
                ];
            }
            if (
                this.queryInfo.age &&
                this.queryInfo.age_l &&
                this.queryInfo.age_r
            ) {
                let arr = {
                    type: "age",
                    value: "",
                    text:
                        "年龄画像：" +
                        "(" +
                        this.getName(this.queryInfo.age, this.ageList) +
                        ") " +
                        this.queryInfo.age_l +
                        "%~" +
                        this.queryInfo.age_r +
                        "%",
                };
                hasChecked.push(arr);
                this.subForm.age.name = this.queryInfo.age;
                this.subForm.age.range = [
                    this.queryInfo.age_l,
                    this.queryInfo.age_r,
                ];
            }
            if (
                this.queryInfo.sex &&
                this.queryInfo.sex_l &&
                this.queryInfo.sex_r
            ) {
                let arr = {
                    type: "sex",
                    value: "",
                    text:
                        "粉丝性别：" +
                        "(" +
                        this.getName(this.queryInfo.sex, this.sexList) +
                        ") " +
                        this.queryInfo.sex_l +
                        "%~" +
                        this.queryInfo.sex_r +
                        "%",
                };
                hasChecked.push(arr);
                this.subForm.sex.name = this.queryInfo.sex;
                this.subForm.sex.range = [
                    this.queryInfo.sex_l,
                    this.queryInfo.sex_r,
                ];
            }
            if (this.subForm.is_quickly_response ==1) {
                let arr = {
                    type: "is_quickly_response",
                    value: "",
                    text: '平台属性：快速回复',
                };
                hasChecked.push(arr);
            }
            if (this.subForm.is_active_creator ==1) {
                let arr = {
                    type: "is_active_creator",
                    value: "",
                    text: '平台属性：频繁发帖',
                };
                hasChecked.push(arr);
            }
            if (this.subForm.is_high_sample_dispatch_rate ==1) {
                let arr = {
                    type: "is_high_sample_dispatch_rate",
                    value: "",
                    text: '平台属性：即时履约',
                };
                hasChecked.push(arr);
            }
            // if (this.subForm.region) {
            //     let arr = {
            //         type: "region",
            //         value: "",
            //         text: "地区："+this.getName(this.subForm.region, this.regionList),
            //     };
            //     hasChecked.push(arr);
            // }
            this.hasScreen = hasChecked;
        },
        // 账号标签
        tagName(tag, list, title, name) {
            let text = [];
            for (let i in list) {
                for (let a in tag) {
                    if (list[i].id == tag[a]) {
                        text.push(list[i][name]);
                    }
                }
            }
            text = text.join("、");
            return `${title}：` + text;
        },
        // 筛选标签
        getName(value, list) {
            let text = list
                .filter((val) => val.id == value)
                .map((item) => {
                    return item.name;
                })
                .toString();
            return text;
        },
        // 删除筛选
        delectScreen(item) {
            if (item.type == "tag") {
                this.subForm.industry = [];
                this.selectWidth = 60;
            } else if (item.type == "fans") {
                this.queryInfo.fx_l = "";
                this.queryInfo.fx_r = "";
                this.subForm.fans_num = [];
            } else if (item.type == "price1") {
                this.queryInfo.jg_l = "";
                this.queryInfo.jg_r = "";
                this.subForm.price_20_60 = [];
            } else if (item.type == "price2") {
                this.queryInfo.jg2_l = "";
                this.queryInfo.jg2_r = "";
                this.subForm.price_60 = [];
            } else if (item.type == "age") {
                this.queryInfo.age = null;
                this.queryInfo.age_l = "";
                this.queryInfo.age_r = "";
                this.subForm.age.name = "";
                this.subForm.age.range = [];
            } else if (item.type == "job") {
                this.queryInfo.job = null;
                this.queryInfo.job_l = "";
                this.queryInfo.job_r = "";
                this.subForm.crowd.name = "";
                this.subForm.crowd.range = [];
            } else if (item.type == "sex") {
                this.queryInfo.sex = null;
                this.queryInfo.sex_l = "";
                this.queryInfo.sex_r = "";
                this.subForm.sex.name = "";
                this.subForm.sex.range = [];
            } else if (item.type == "is_quickly_response") {
                this.subForm.is_quickly_response = 0;
            } else if (item.type == "is_active_creator") {
                this.subForm.is_active_creator = 0;
            } else if (item.type == "is_high_sample_dispatch_rate") {
                this.subForm.is_high_sample_dispatch_rate = 0;
            } 
            
            this.$nextTick(() => {
                this.changeScreen();
            });
        },

        // 筛选
        selectScreen() {
            this.changeScreen();
            this.subForm.page = 1;
            this.getDataList();
        },

        // 重置
        resetScreen() {
            this.queryInfo = {
                fx_l: "",
                fx_r: "",
                age: "",
                age_l: "",
                age_r: "",
                sex: "",
                sex_l: "",
                sex_r: "",
            };
            this.subForm.page = 1;
            this.subForm.field = "";
            this.subForm.order = "";
            this.subForm.creator_name = "";
            this.subForm.industry = [];
            this.subForm.follower_cnt = [];
            this.subForm.age.name = "";
            this.subForm.age.range = [];
            this.subForm.sex.name = "";
            this.subForm.sex.range = [];
            this.subForm.is_quickly_response = 0;
            this.subForm.is_active_creator = 0;
            this.subForm.is_high_sample_dispatch_rate = 0;
            this.subForm.region = "ID";
            this.hasScreen = [];
            this.getDataList();
        },
    },
    components: {},
};
</script>


<style scoped>
.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    position: relative;
    font-weight: bold;
}

.fx_left {
    width: 100px;
    font-size: 14px;
    color: #17233d;
    line-height: 36px;
    height: 36px;
    margin-top: 12px;
}
.fx_right {
    flex-wrap: wrap;
}
.fx_box {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    margin-right: 12px;
    height: 32px;
    padding: 0px 16px;
    margin-top: 12px;
}
.fx_text {
    font-size: 14px;
    color: #616c85;
}
.fx_line {
    height: 12px;
    border-left: 1px solid #ebebeb;
    margin-left: 8px;
    margin-right: 0;
}
.noMl {
    margin-left: 0;
}
.fx_unit {
    font-size: 14px;
    color: #17233d;
    margin: 0 4px;
}
.fx_check {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    padding-top: 12px;
    padding-left: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.check_item {
    padding-left: 8px;
    margin-bottom: 12px;
    margin-right: 12px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 2px;
    height: 32px;
    font-size: 13px;
    color: #616c85;
}
.fx_close {
    font-size: 13px;
    width: 32px;
}
.fx_btn {
    margin-top: 12px;
    margin-left: 100px;
}
.mg_top0 {
    margin-top: 0;
}
/deep/ .fx_box .el-input__inner {
    border: 0;
    padding-left: 8px;
    font-size: 14px;
}
/deep/ .fx_box .el-select .el-input__inner::-webkit-input-placeholder,
/deep/ .fx_box .el-cascader .el-input__inner::-webkit-input-placeholder {
    color: #616c85;
}
/deep/ .fx_box .el-select .el-input__inner {
    padding-left: 0;
}
/deep/ .fx_box .el-cascader__tags .el-tag {
    max-width: 120px;
}
.cust_checkbox {
}
.cust_checkbox svg {
    position: relative;
    top: 5px;
}
</style>



